<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.添加视口标签 快捷方式：meta:vp -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--2.设置网页渲染模式  快捷方式：meta:compat  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--3.把bootstrap 核心样式（压缩版）引入-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <title>Document</title>
    <!--6.针对于IE9 以下浏览器做兼容性处理 快捷方式：cc:ie -->
    <!--[if lt IE9 ]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<form class="form-inline text-center" method="post">{% csrf_token %}
    <div class="form-group">
        <label>term:</label>
        <input type="text" class="form-control" name="term" placeholder="例如：jack  johnson。" required>
    </div>

    <div class="form-group">
        <label>选择国家:</label>
        <select name="country" class="form-control">
            <option value="us">美国</option>
            <option value="ca">加拿大</option>
            <option value="cn">中国</option>
            <option value="gb">英国</option>
            <option value="fr">法国</option>
            <option value="de">德国</option>
            <option value="jp">日本</option>
        </select>
    </div>

    <div class="form-group">
        <label>要搜索的媒体类型:</label>
        <select name="media" class="form-control">
            <option>all</option>
            <option>movie</option>
            <option>podcast</option>
            <option>music</option>
            <option>musicVideo</option>
            <option>audiobook</option>
            <option>shortFilm</option>
            <option>tvShow</option>
            <option>software</option>
            <option>ebook</option>
        </select>
    </div>


    <div class="form-group">
        <label>返回的结果数:</label>
        <input type="number" value="50" class="form-control" name="limit" placeholder="">
    </div>

    <button type="submit" class="btn btn-default">开始搜索</button>
</form>

<!--4.把jQuery 引入-->
<script src="/static/js/jquery-1.10.2.min.js"></script>
<!--5.把bootstrap 核心脚本文件（压缩版）引入-->
<script src="/static/js/bootstrap.min.js"></script>

<div id="app">

    <table class="table table-bordered table-striped table-hover table-condensed table-responsive">
        <tr>

            <th>wrapperType</th>
            <th>kind</th>
            <th>artistId</th>
            <th>collectionId</th>
            <th>trackId</th>
            <th>artistName</th>
            <th>collectionName</th>
            <th>trackName</th>
            <th>collectionCensoredName</th>
            <th>trackCensoredName</th>
            <th>artistViewUrl</th>
            <th>collectionViewUrl</th>
            <th>trackViewUrl</th>
            <th>previewUrl</th>
            <th>artworkUrl30</th>
            <th>artworkUrl60</th>
            <th>artworkUrl100</th>
            <th>collectionPrice</th>
            <th>trackPrice</th>
            <th>releaseDate</th>
            <th>collectionExplicitness</th>
            <th>trackExplicitness</th>
            <th>discCount</th>
            <th>discNumber</th>
            <th>trackCount</th>
            <th>trackNumber</th>
            <th>trackTimeMillis</th>
            <th>country</th>
            <th>currency</th>
            <th>primaryGenreName</th>
            <th>isStreamable</th>
        </tr>
        <tr v-for="result in results">
            {% verbatim myblock %}
                <td>{{ result.wrapperType }}</td>
                <td>{{ result.kind }}</td>
                <td>{{ result.artistId }}</td>
                <td>{{ result.collectionId }}</td>
                <td>{{ result.trackId }}</td>
                <td>{{ result.artistName }}</td>
                <td>{{ result.trackName }}</td>
                <td>{{ result.collectionName }}</td>
                <td>{{ result.collectionCensoredName }}</td>
                <td>{{ result.trackCensoredName }}</td>
                <td>{{ result.artistViewUrl }}</td>
                <td>{{ result.collectionViewUrl }}</td>
                <td>{{ result.trackViewUrl }}</td>
                <td>{{ result.previewUrl }}</td>
                <td>{{ result.artworkUrl30 }}</td>
                <td>{{ result.artworkUrl60 }}</td>
                <td>{{ result.artworkUrl100 }}</td>
                <td>{{ result.collectionPrice }}</td>
                <td>{{ result.trackPrice }}</td>
                <td>{{ result.releaseDate }}</td>
                <td>{{ result.collectionExplicitness }}</td>
                <td>{{ result.trackExplicitness }}</td>
                <td>{{ result.discCount }}</td>
                <td>{{ result.discNumber }}</td>
                <td>{{ result.trackCount }}</td>
                <td>{{ result.trackNumber }}</td>
                <td>{{ result.trackTimeMillis }}</td>
                <td>{{ result.country }}</td>
                <td>{{ result.currency }}</td>
                <td>{{ result.primaryGenreName }}</td>
                <td>{{ result.isStreamable }}</td>
            {% endverbatim myblock %}

        </tr>
    </table>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var results ={{ results|safe }};
    let vm = new Vue({
        el: "#app",
        data: {
            results: results,
        }
    })
</script>
</body>
</html>
